<template>
	<view>
		<u-popup :show="getters.popupLoginShow" :round="10" closeable @close="closePopup">
			<view class="popup-warp">
				<view class="popup-title">绑定手机号</view>
				<view class="popup-list">
					<view class="popup-tip">
						为了您的账号安全性和一致性，请先绑定手机号。
					</view>
					<view class="popup-btn">
						<u-button type="primary" color="#9036FF" shape="circle" text="手机号授权"
							open-type="getPhoneNumber" @getphonenumber="onMobileLogin"/>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { loginApi } from '@/api/login'
	export default {
		name: "index",
		props: {

		},
		computed: {
			getters(){
				return this.$store.getters
			}
		},
		data() {
			return {
			}
		},
		mounted() {

		},
		methods: {
			//关闭Popup登录
			closePopup() {
				this.$store.commit('setLoginShow', false)
			},
			//微信手机号码一键登录
			async onMobileLogin(e){
				let that = this, res = e.detail
				uni.showLoading({ title: '加载中' })
				setTimeout(function() {
					uni.hideLoading()
				}, 2000)
				if (!res.encryptedData) {
					return uni.showToast({
						title: '登录失败，请重新授权', icon: 'none'
					})
				}
				let params = {
					encryptedData: (res.encryptedData),
					iv: (res.iv),
					code: res.code
				}
				let result = await loginApi(params)
				if(Number(result.code) == 0){
					that.$store.commit('setUserInfo', result.data)
					that.closePopup() //关闭Popup登录
					return uni.showToast({
						title: '登录成功', icon: 'none'
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
.popup-warp{
	font-size: .9rem;
	.popup-title{
		text-align: center;
		font-size: 1.1rem;
		line-height: 90rpx;
	}
	.popup-list{
		padding:0 30rpx 30rpx 30rpx;
		.popup-tip{
			font-size: .8rem; color: #8e8e8f;
		}
		.popup-btn{
			margin-top: 30rpx;
		}
	}
}
</style>